<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title></title>

  <!--7-15行代码都得引入。然后基本框架也不要变。里面改内容即可实现所有页面。 ！！！！！-->

  <!-- 引入vue -->
  <script src="../plugins/vue/vue.js" type="text/javascript" charset="utf-8"></script>
  <!-- 引用element-ui -->
  <link rel="stylesheet" href="../plugins/element-ui/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/index.css">
  <script src="../plugins/element-ui/index.js" charset="utf-8"></script>
  <!-- 引用axios -->
  <script src="../plugins/axios/axios.min.js" charset="utf-8"></script>

  <script src="../plugins/sha256.js" charset="utf-8"></script>

  <style>
      .background {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: -1;
          background-image: url("../img/test.png");
          background-repeat: no-repeat;
          background-size: cover;
          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/loginPic.png');
          background-position: center center;
      }

      .loginInputBoxBOX {
          top: 50%;
          left: 50%;
          padding-right: 100px;
      }

      * {
          margin: 0;
          padding: 0;
      }

      #app {
          top: 50%;
          left: 50%;
          background-color: white;
          z-index: 1;
          margin-top: -280px;
          margin-left: -550px;
          width: 500px;
          height: 500px;

          border-radius: 10px;
          padding: 20px;

          text-align: center;
          position: absolute;

      }

      .LoginButton {
          text-align: center;
          width: 100% !important;
          height: 46px !important;
          font-size: 20px !important;
          border-radius: 100px !important;
          background-color: lightskyblue;
          border: none !important;
          cursor: pointer;
      }

      .title {
          /*padding: 0 50px;*/
          padding-top: 30px;
          /*font-style: italic;*/
          font-weight: 100;
          font-size: 25px;
          line-height: 40px;
          text-align: center;
          color: dodgerblue;
      }

  </style>

</head>

<body>
<div class="background">
  <img :src="imgSrc" width="100%" height="100%" alt=""/>
</div>


<div class="loginInputBoxBOX">
  <br>
  <div class="title">
    <h1 align="center">问卷管理系统</h1>
  </div>

  <div class="loginInputBox" id="app">
    <div style="padding-top: 20px"></div>
    <div class="1"><h1>登录页面</h1></div>
    <div style="padding-bottom: 80px"></div>

    <el-input placeholder="请输入内容" v-model="uid" style="padding-bottom: 30px">
      <template slot="prepend">账 号：</template>
    </el-input>

    <el-input placeholder="请输入密码" v-model="upwd" show-password>
      <template slot="prepend">密 码：</template>
    </el-input>
    <div style="padding-bottom: 30px"></div>

    <el-button
            type="primary" @click="login()" round name="LoginButton" class="LoginButton"
            style="color: White; padding-bottom: 30px"
            :loading="loginWaiting">登 录
    </el-button>
    <div style="padding-bottom: 20px"></div>

    <el-button
            type="primary" @click="register()" round name="LoginButton" class="LoginButton"
            style="color: White">注 册
    </el-button>

  </div>
</div>


<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            uid: "",
            upwd: "",
            loginWaiting: false
        },
        methods: {
            register() {
                window.location.href = "Register.html";
            },
            login() {
                if (this.uid == "") {
                    alert("请输入用户名");
                } else if (this.upwd == "") {
                    alert("请输入密码");
                } else {
                    let data = {"userName": this.uid, "passWord": SHA256(this.upwd)}
                    this.loginWaiting = true
                    axios.post("http://localhost:8080/login", data)
                        .then(res => {
                            var co = res.data.code;
                            var mes = res.data.message;
                            if (co === "200") {
                                if (mes === "admin") {   //跳转到admin页面
                                    window.location.href = "RenterOperation.html";
                                } else if (mes === "renter") {
                                    window.location.href = "UserOperation.html";
                                } else if (mes === "user") {
                                    window.location.href = "ReplierOperation.html";
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: '服务不可用',
                                        type: 'error'
                                    });
                                }
                            } else {
                                alert("密码错误");
                            }
                            this.loginWaiting = false
                        })
                }

            },

        },
        created() {//初始化所调用的方法
            // //alert(this.$url);
            // console.log(${this.$url});
            // var a = "3";
            // axios.get("http://localhost:8080/questionnaire/"+a).then(res=>{
            // 	console.log(res.data);
            // })
        },
    })
</script>
</body>
</html>
